<template>
  <div class="dispatch">
      dispatch的使用
      <button @click="add">+20</button>
      <button @click="addTWO(2)">+2</button>
      <button @click="act1(3)">+3</button>
      <div class="swiper">
          <div v-for="item in banner" :key="item">
          <img :src="item.img" alt="">
      </div>
      </div>
      <button @click="decrement">-anananm</button>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import axios from 'axios'
export default {
  methods: {
    add () {
      this.$store.dispatch('addTWO', 20)
    },
    ...mapActions(['addTWO', 'incrementAction']),
    ...mapActions({
      act1: 'addTWO'
    }),
    shuju () {
      axios.get('./img.json').then(res => {
        console.log(res.data)
        this.$store.commit('getBanner', res.data)
      })
    },
    decrement () {
      this.incrementAction(8)
    }
  },
  mounted () {
    this.shuju()
  },
  computed: mapState({
    banner: state => state.banner1
  })
}
</script>

<style scoped>
.swiper {
    display: flex;
}
</style>
